<template>
    <div class="box">
        <div class="swiper_box">
            <div class="prev">
                <img :src="leftBtn" alt="" class="swiper-button" @click="clickPrev">
            </div>
            <div class="swiper_">
                <swiper ref="mySwiper" :options="swiperOptions">
                    <swiper-slide class="item-device" v-for="(item, index) in colorList" :key="index">
                        <card-templete :color="item"></card-templete>
                    </swiper-slide>
                </swiper>
            </div>
            <div class="next">
                <img :src="rightBtn" alt="" class="swiper-button " @click="clickNext">
            </div>
        </div>
    </div>
</template>

<script>
import cardTemplete from "@/components/card/index.vue"
export default {
    data() {
        return {
            swiperOptions: {
                slidesOffsetBefore: 0,
                slidesOffsetAfter: 0,
                slidesPerView: 7,
                freeMode: false,
                spaceBetween: 30,
                history: 'love',
                //设置禁止手动滑动，只能通过按钮
                allowTouchMove:false,
                // 设置点击箭头
                navigation: {
                    nextEl: '.next',
                    prevEl: '.prev',
                },
            },
            leftBtn: require('@/assets/img/left.png'),
            //左边点击按钮图片
            rightBtn: require('@/assets/img/right.png'),
            colorList:['#6393E8','#C269F8','#FF9446','#1EC4DB','#4EC795','#F07878','#D5B84E','#6393E8','#C269F8','#FF9446']
            //右边点击按钮图片
            // deviceList: require('./device.json').deviceList,//这是轮播图图片数组

        }
    },
    components: {
        cardTemplete
    },
    computed: {
        // swiper() {
        //     return this.$refs.mySwiper.$swiper
        // }
    },
    methods: {
        /* 前一步 */
        clickPrev() {
            // const that = this
            // const length = that.deviceList.length
            // if (that.activeBtn <= 0 || length == 0) {
            //     return false
            // }
        },
        /* 后一步 */
        clickNext() {
            // const that = this
            // const length = that.deviceList.length
            // if (that.activeBtn >= length - 1 || length == 0) {
            //     return false
            // }
        },
    }

}
</script>

<style lang="scss" scoped>
.swiper_box {
    width: 100%;
    background: #fff;
    padding: 0 20px;
    margin-top: 17px;

    >div {
        display: inline-block;
        vertical-align: middle;
    }

    .swiper-button {
        width: 20px;
        height: 20px;
        cursor: pointer;
        text-align: center;
        padding: 0;
        font-weight: 500;
    }

    .swiper_::v-deep {
        width: calc(100% - 110px);
        margin: 0 10px;

        .swiper-container {
            .swiper-wrapper {
                padding: 15px 0!important;
                box-sizing: border-box;
            }
        }
    }
}
</style>